/**
* 设备管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-select size="small" v-model="formInline.pk" placeholder="请选择产品">
          <el-option v-for="pro in products" :label="pro.name" :value="pro.code" :key="pro.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select size="small" v-model="formInline.online" placeholder="设备状态">
          <el-option label="所有状态" value=""></el-option>
          <el-option label="在线" value="true"></el-option>
          <el-option label="离线" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.dn" placeholder="输入设备DN"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
      style="width: 100%;">
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column sortable prop="deviceId" label="设备ID" width="250" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="productKey" label="产品" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="deviceName" label="设备DN" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="state" label="状态" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state.online" type="success" size="mini">在线</el-tag>
          <el-tag v-if="!scope.row.state.online" type="danger" size="mini">离线</el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="createAt" label="创建时间" width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{scope.row.createAt|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.nodeType==0" size="mini" type="infor" @click="showChidrenDevices(scope.$index, scope.row)">子设备</el-button>
          <el-button v-if="scope.row.nodeType!=0" disabled size="mini" type="infor" @click="goDeviceDetail(scope.$index, scope.row)">子设备</el-button>
          <el-button size="mini" type="infor" @click="goDeviceDetail(scope.$index, scope.row)">详情</el-button>
          <el-popconfirm title="确认要删除吗？" @confirm="deleteDevice(scope.$index, scope.row)" class="mg-left-10">
            <el-button slot="reference" size="mini" plain type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 子设备列表 -->
    <el-dialog title="子设备列表" :visible.sync="chidrenDevicesVisiable" width="70%">
      <el-table size="small" :data="gatewayChildren" highlight-current-row v-loading="loading" border
        element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center" type="index" width="60">
        </el-table-column>
        <el-table-column sortable prop="deviceId" label="设备ID" width="250" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="productKey" label="产品" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="deviceName" label="设备DN" width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="state" label="状态" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state.online" type="success" size="mini">在线</el-tag>
            <el-tag v-if="!scope.row.state.online" type="danger" size="mini">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable prop="createAt" label="创建时间" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{scope.row.createAt|timestampToTime}}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-popconfirm title="确认要解除与网关的关联吗？" @confirm="unbindDevice(scope.$index, scope.row)">
              <el-button slot="reference" size="mini" plain type="danger">解绑</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
  import {
    DeviceList,
    DeleteDevice,
    UnbindDevice,
    GatewayChildren,
  } from '../../api/deviceApi'
  import {
    ProductList
  } from '../../api/productApi'
  import Pagination from '../../components/Pagination'
  export default {
    data() {
      return {
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        chidrenDevicesVisiable: false,
        title: '预览',
        formInline: {
          page: 1,
          limit: 10,
          pk: '',
          dn: '',
          online: ''
        },
        products: {},
        listData: [],
        gatewayChildren: [],
        productMap: {},
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
      this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      getdata(parameter) {
        this.loading = true

        ProductList()
          .then(res => {
            this.products = res.data;
            let nodeTypeMap = {};
            res.data.forEach(p => {
              this.productMap[p.code] = p.name;
              nodeTypeMap[p.code] = p.nodeType;
            });

            DeviceList(parameter)
              .then(res => {
                this.loading = false
                res.data.forEach(d => {
                  d['nodeType'] = nodeTypeMap[d.productKey];
                  d.productKey = this.productMap[d.productKey];
                });

                this.listData = res.data
                // 分页赋值
                this.pageparm.currentPage = this.formInline.page
                this.pageparm.pageSize = this.formInline.limit
                this.pageparm.total = res.count

              }, () => {
                this.loading = false
              })

          }, () => {
            this.loading = false
          });

      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      // 搜索事件
      search() {
        this.getdata(this.formInline)
      },
      goDeviceDetail(index, row) {
        this.$router.push({
          path: '/device/DeviceDetail',
          query: {
            deviceId: row.deviceId
          }
        })
      },
      deleteDevice(index, row) {
        this.loading = true
        DeleteDevice(row.deviceId)
          .then(() => {
            this.search();
            this.loading = false
          }, () => {
            this.loading = false
          })
      },
      unbindDevice(index, row) {
        this.loading = true
        UnbindDevice(row.deviceId)
          .then(() => {
            this.search();
            this.loading = false
          }, () => {
            this.loading = false
          })
      },
      showChidrenDevices(index, row) {
        this.loading = true
        GatewayChildren(row.deviceId)
          .then(res => {
            this.loading = false
            this.chidrenDevicesVisiable = true;

            res.forEach(d => {
              d.productKey = this.productMap[d.productKey];
            });
            this.gatewayChildren = res;
          }, () => {
            this.loading = false
          })
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }
</style>
